<template>
<div>
  <div class="tabNav">
   <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b>/<img src="../assets/img/settlement.png" />发票管理</b>
  </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd invoiceManage table-drop" shadow="hover">
                <div class="search">
                  <!-- <el-select v-model="value2" placeholder="最近三个月">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select> -->
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    range-separator="~">
                 </el-date-picker>
                  <el-select v-model="value" placeholder="全部">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-button type="primary" @click="search()">查询</el-button>
                </div>
                <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"
                ref="multipleTable"
                @sort-change="sortChange"
                >
                <el-table-column prop="id" sortable="custom" align="center" label="ID" width="100"> </el-table-column>
                <el-table-column prop="billedBody" sortable="custom" align="center" label="企业名称"> </el-table-column>
                <el-table-column
                    prop="billAmount"
                    align="center"
                    label="开票金额"
                    sortable="custom"
                >
                </el-table-column>
                <el-table-column prop="createTime" sortable="custom" align="center" label="发票申请时间">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="mailingAddress" align="center" label="邮寄地址">
                </el-table-column> -->
                <el-table-column prop="sevicerNum" align="center" label="结算单明细" class-name="editor">
                  <template #default="item">
                  <el-button type="text" @click="getBusinessMingxs(item.row)">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="billStatus" align="center" label="状态">
                    <template #default="item">
                    {{ billStatus[item.row.billStatus] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="140"
                    class-name="editor"
                >
                    <template #default="item">
                      <el-button type="text" v-if="item.row.billStatus == 2" @click="getQueryInvoiceByParam(item.row.billNo, 2)">上传发票</el-button>
                      <el-button type="text" v-else @click="getQueryInvoiceByParam(item.row.billNo, 1)">查看</el-button>
                    </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>

    <!-- 查看 -->
    <el-dialog title="发票信息" v-model="taskDelShow" custom-class="examine-style" width="50%">
      <div class="modifyPassword">
            <div class="details-box">
              <el-divider></el-divider>
            </div>
            <div class="taskDel" style="overflow: hidden">
              <strong><em>抬头类型</em>{{queryInvoiceByParam.billType == 1 ? '增值税专用发票' : '普通发票'}}</strong>
              <strong><em>发票抬头</em>{{queryInvoiceByParam.billedBody}}</strong>
              <strong><em>税号</em>{{queryInvoiceByParam.invoiceTaxNumber}}</strong>
              <strong><em>结算单</em>
              <div class="cardTits" style="width: 400px;float: left;margin-bottom: 20px;">
                <el-table
                    :data="serviceArr"
                    stripe
                    style="width: 100%"
                  >
                    <el-table-column prop="phone" label="发放时间" width="180px">
                      <template #default="item">
                        <template v-if="item.row.startTime == null">-</template>
                        <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.startTime)) }}</template>
                      </template>
                    </el-table-column>
                    <el-table-column prop="settlementAmount" label="结算金额">
                    </el-table-column>
                    <el-table-column prop="settlementAmount" label="操作" class-name="editor">
                      <template #default="item">
                        <el-button type="text" @click="getBusinessMingx(item.row)">详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  </div>
              </strong>
              <strong><em>开票方</em>{{queryInvoiceByParam.businessName}}</strong>
              <strong><em>总金额</em>{{queryInvoiceByParam.billAmount}}</strong>
              <strong><em>接收方式</em>{{queryInvoiceByParam.receiveType == 2 ? '自提' : '数电'}}</strong>
              <!-- <strong><em>收件地址</em>{{queryInvoiceByParam.mailingAddress}}</strong> -->
              <strong><em>申请时间</em>{{format('yyyy-MM-dd hh:mm:ss', new Date(queryInvoiceByParam.createTime))}}</strong>
              <template v-if="queryInvoiceByParam.billStatus == 1">
                <strong><em>被驳回时间</em>{{format('yyyy-MM-dd hh:mm:ss', new Date(queryInvoiceByParam.updateTime))}}</strong>
              </template>
              <strong v-if="queryInvoiceByParam.billStatus != 0"><em>下载发票</em>
                <div v-if="queryInvoiceByParam.invoiceUrl === '' || queryInvoiceByParam.invoiceUrl === undefined || queryInvoiceByParam.invoiceUrl === null">--</div>
                <button v-else @click="openUrl(queryInvoiceByParam.invoiceUrl)" class="downInvoice">下载</button>
              </strong>
              <template v-if="queryInvoiceByParam.billStatus == 3">
                <!-- <strong><em>快递公司</em>{{queryInvoiceByParam.logisticsName}}</strong> -->
                <!-- <strong><em>邮寄单号</em>{{queryInvoiceByParam.logisticsNo}}</strong> -->
                <strong v-if="queryInvoiceByParam.sendTime == null"><em>寄出日期</em>-</strong>
                <strong v-else><em>开票日期</em>{{format('yyyy-MM-dd hh:mm:ss', new Date(queryInvoiceByParam.sendTime))}}</strong>
              </template>
              <strong v-else><em>被驳回原因</em><el-input type="textarea" v-model="textarea"></el-input></strong>
              
            </div>
      </div>
      <template #footer>
        <span class="dialog-footer" v-if="queryInvoiceByParam.billStatus != 3">
            <el-button style="margin-top: 40px" type="primary" @click="getCreatOrUpdateInvoice(queryInvoiceByParam.billNo, 2)">通 过</el-button>
            <el-button type="danger" style="margin-top: 40px" @click="getCreatOrUpdateInvoice(queryInvoiceByParam.billNo, 1)">驳 回</el-button>
            <el-button style="margin-top: 40px" @click="taskDelShow = false">取 消</el-button>
        </span>
        <span v-else></span>
      </template>
  </el-dialog>
  <!--结算单明细 -->
    <el-dialog
      title="结算单明细"
      custom-class="task-dialog"
      v-model="TaskModuleShow"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <el-table
          :data="businessList"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="结算单ID" width=""> </el-table-column>
          <el-table-column prop="amount" label="发放总金额" width="">
          </el-table-column>
          <el-table-column prop="fee" label="平台服务费" width="">
          </el-table-column>
          <el-table-column prop="settlementAmount" label="实付总金额" width="">
          </el-table-column>
          <el-table-column prop="platformPayTime" label="发放时间" width="">
            <template #default="item">
              <template v-if="item.row.platformPayTime == null">-</template>
              <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.platformPayTime)) }}</template>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="结算单创建时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
          <el-table-column
              prop="caozuo"
              label="操作"
              width="140"
              class-name="editor"
          >
              <template #default="item">
                <el-button type="text"  @click="getQueryTaskByParam(item.row)">查看</el-button>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="TaskModuleShow = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <el-dialog
      title="结算单明细"
      custom-class="task-dialog"
      v-model="invoiceTaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <el-table
          :data="businessMingxi"
          stripe
          style="width: 100%"
          ref="multipleTable"
        >
          <el-table-column prop="id" label="结算单ID" width=""> </el-table-column>
          <el-table-column prop="amount"  label="发放总金额" width="">
            <template #default="item">
              {{ formatNumber(item.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="fee" label="平台服务费" width="">
            <template #default="item">
              {{ formatNumber(item.row.fee) }}
            </template>
          </el-table-column>
          <el-table-column prop="settlementAmount" label="实付总金额" width="">
            <template #default="item">
              {{ formatNumber(item.row.settlementAmount) }}
            </template>
          </el-table-column>
          <el-table-column prop="platformPayTime" label="发放时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.platformPayTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="结算单创建时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="settlementAmount" label="操作" class-name="editor">
            <template #default="item">
              <el-button type="text" @click="getBusinessList1(item.row)">明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!--关联任务明细 -->
    <el-dialog
      title="关联任务明细"
      custom-class="task-dialog"
      v-model="guanlianTaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <el-table
          :data="guanlianTaskList"
          stripe
          style="width: 100%"
          @sort-change="sortChange4"
        >
          <el-table-column prop="id" sortable="custom" label="任务ID" width="80"> </el-table-column>
          <el-table-column prop="name" label="任务名称" min-width="120">
          </el-table-column>
          <el-table-column prop="taskPayment" sortable="custom" label="预计服务费" width="110">
            <template #default="item">
              {{ formatNumber(item.row.taskPayment) }}
            </template>
          </el-table-column>
          <el-table-column prop="legalName" sortable="custom" label="任务接收人" width="110">
          </el-table-column>
          <el-table-column prop="legalPhone" sortable="custom" label="任务接收人手机号" min-width="150">
          </el-table-column>
          <el-table-column prop="bonus" sortable="custom" label="奖励" width="90">
            <template #default="item">
              {{ formatNumber(item.row.bonus) }}
            </template>
          </el-table-column>
          <el-table-column prop="fine" sortable="custom" label="处罚" width="90">
            <template #default="item">
              {{ formatNumber(item.row.fine) }}
            </template>
          </el-table-column>
          <el-table-column prop="shoudPayment" sortable="custom" label="实际服务费" width="110">
            <template #default="item">
              {{ formatNumber(item.row.shoudPayment) }}
            </template>
          </el-table-column>
          <el-table-column prop="releaseDate" sortable="custom" label="任务开始时间" width="150">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.releaseDate)) }}
            </template>
          </el-table-column>
          <el-table-column prop="endDate" sortable="custom" label="任务结束时间" width="150">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endDate)) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="guanlianTaskModule = false">取 消</el-button>
          <el-button type="primary" @click="guanlianTaskModule = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!--结算明细 -->
    <el-dialog
      title="结算明细"
      custom-class="task-dialog"
      v-model="threeDialog"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <!-- 个体工商户服务款 -->
        <!-- <div class="title">服务款</div> -->
        <el-table :data="buMingxiThree" stripe style="width: 100%">
          <el-table-column width="30">
						</el-table-column>
            <el-table-column prop="number" sortable="custom" label="序号">
						</el-table-column>
						<el-table-column prop="projectName" sortable="custom" width="140" label="项目名称">
						</el-table-column>
						<el-table-column prop="name" sortable="custom" label="姓名">
						</el-table-column>
						<el-table-column prop="idcard" sortable="custom" label="身份证">
						</el-table-column>
						<el-table-column prop="bankNo" sortable="custom" label="银行卡号">
						</el-table-column>
						<el-table-column prop="bankName" sortable="custom" width="140" label="开户行">
						</el-table-column>
						<el-table-column prop="bankAddress" sortable="custom" width="140" label="开户地">
						</el-table-column>
            <el-table-column prop="phone" sortable="custom" width="100" label="手机号">
						</el-table-column>
						<el-table-column prop="amount" sortable="custom" width="140" label="发放金额">
							<template #default="item">
								{{ formatNumber(item.row.amount) }}
							</template>
						</el-table-column>
						<el-table-column prop="feeRate" sortable="custom" label="服务费率">
							<template #default="item">
								{{ formatNumber(item.row.feeRate) }}%
							</template>
						</el-table-column>
						<el-table-column prop="fee" sortable="custom" label="服务费">
							<template #default="item">
								{{ formatNumber(item.row.fee) }}
							</template>
						</el-table-column>
						<el-table-column prop="settlementAmount" sortable="custom" label="实付金额">
							<template #default="item">
								{{ formatNumber(item.row.settlementAmount) }}
							</template>
						</el-table-column>
          <!-- <el-table-column prop="taskId" label="任务ID" width="">
          </el-table-column> -->
          <!-- <el-table-column prop="legalName" label="姓名" width="">
          </el-table-column>
          <el-table-column prop="legalIdCard" label="身份证号" width="">
          </el-table-column>
          <el-table-column prop="legalphone" label="手机号" width="">
          </el-table-column>
          <el-table-column prop="bankNo" label="收款卡号" width="180">
          </el-table-column>
          <el-table-column
            prop="bankName"
            label="收款银行"
            width=""
          ></el-table-column>
          <el-table-column prop="subFee" sortable="custom" label="实际服务费" width="">
            <template #default="item">
            <template v-if="item.row.subFee == null">--</template>
            <template v-else>{{ formatNumber(item.row.subFee) }}</template>
            </template>
          </el-table-column>
          <el-table-column prop="bankName" label="任务明细" width="" class-name="editor">
            <template #default="item">
              <el-button type="text" @click="getTaskMingxi(item.row)">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态" width="">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="remarks"
            label="备注"
            width=""
          ></el-table-column> -->
        </el-table>
        <!-- <div class="add-border" style="margin-top: 30px"></div> -->
        <!-- <div class="title">服务费</div>
        <el-table
          :data="buMingxiThree"
          stripe
          style="width: 100%"
          ref="multipleTable"
        >
          <el-table-column
            prop="id"
            label="结算单ID"
            width=""
          ></el-table-column>
          <el-table-column
            prop="fee"
            label="平台服务费"
            width=""
          ></el-table-column>
          <el-table-column
            prop="platformReceiveBank"
            label="收款银行"
            width=""
          ></el-table-column>
          <el-table-column
            prop="platformReceiveCardNo"
            label="收款卡号"
            width=""
          ></el-table-column>
          <el-table-column prop="createTime" label="结算单创建时间" width="">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态" width="">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
            </template>
          </el-table-column>
        </el-table> -->
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="threeDialog = false">取 消</el-button>
          <el-button type="primary" @click="threeDialog = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 上传 -->
    <el-dialog title="发票信息" v-model="jichuDelShow" custom-class="examine-style" width="50%">
      <div class="modifyPassword">
            <div class="details-box">
              <el-divider></el-divider>
            </div>
            <div class="taskDel" style="overflow: hidden">
              <strong><em>抬头类型</em>{{queryInvoiceByParam.billType == 1 ? '增值税专用发票' : '普通发票'}}</strong>
              <strong><em>发票抬头</em>{{queryInvoiceByParam.billedBody}}</strong>
              <strong><em>税号</em>{{queryInvoiceByParam.invoiceTaxNumber}}</strong>
              <strong><em>结算单</em>
              <div class="cardTits" style="width: 400px;float: left;margin-bottom: 20px;">
                <el-table
                    :data="serviceArr"
                    stripe
                    style="width: 100%"
                  >
                    <el-table-column prop="phone" label="发放时间" width="180px">
                      <template #default="item">
                        <template v-if="item.row.startTime == null">-</template>
                        <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.startTime)) }}</template>
                      </template>
                    </el-table-column>
                    <el-table-column prop="settlementAmount" label="结算金额">
                    </el-table-column>
                    <el-table-column prop="settlementAmount" label="操作">
                      <template #default="item">
                        <el-button type="text" @click="getBusinessMingx(item.row)">详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  </div>
              </strong>
              <strong><em>开票方</em>{{queryInvoiceByParam.businessName}}</strong>
              <strong><em>总金额</em>{{queryInvoiceByParam.billAmount}}</strong>
              <strong><em>接收方式</em>{{queryInvoiceByParam.receiveType == 2 ? '自提' : '数电'}}</strong>
              <!-- <strong><em>收件地址</em>{{queryInvoiceByParam.mailingAddress}}</strong> -->
              <strong><em>申请时间</em>{{format('yyyy-MM-dd hh:mm:ss', new Date(queryInvoiceByParam.createTime))}}</strong>
              <strong id="invoiceUrl"><em>上传发票</em>
                <!-- <button @click="openUrl(queryInvoiceByParam.url)" class="downInvoice">点击上传发票</button> -->
                <el-upload
                class="upload-demo"
                action=""
                accept="image/png,image/jpeg,application/pdf"
                :multiple="false"
                :limit="1"
                :file-list="fileList"
                :before-remove="file => beforeRemove('invoiceUrl')"
                :http-request="file => handleChange(file, 'invoiceUrl')"
              >
                  <el-button size="small" plain>点击上传发票</el-button>
                </el-upload>
              </strong>
              <!-- <strong><em style="line-height:40px">快递公司</em><el-input type="text" v-model="kuaidiGongsi"></el-input></strong> -->
              <!-- <strong><em style="line-height:40px">邮寄单号</em><el-input type="text" v-model="kuaidiCode"></el-input></strong> -->
            </div>
      </div>
      <template #footer>
      <span class="dialog-footer">
          <el-button style="margin-top: 40px" type="primary" @click="kuaidiEdit()">确 定</el-button>
          <el-button style="margin-top: 40px" @click="jichuDelShow = false">取 消</el-button>
      </span>
      </template>
  </el-dialog>
</div>  
</template>
<script>
// import axios from 'axios'
import { ElLoading } from 'element-plus'
export default {
  data() {
    return {
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      threeDialog: false,
      jichuDelShow: false,
      guanlianTaskList: [],
      guanlianTaskModule: false, // 关联任务明细
      busId: null,
      businessThree: [],
      buMingxiThree: [],
        billStatus: {
          0: "待审批",
          1: "已驳回",
          2: "待开票",
          3: "已完成",
        },
        paymentStatuts: {
          1: "未打款",
          0: "未结算",
          2: "已打款",
          3: "废弃",
        },
        textarea: '',
        businessList: [],
        invoiceTaskModule: false,
        TaskModuleShow: false,
        taskDelShow: false,
        form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: '',
            type: '',
            input4: '',
            input5: '',
            input6: '',
            resource: '',
            desc: ''
        },
        options: [{
          value: '',
          label: '全部'
        },{
          value: '3',
          label: '已完成'
        }, {
          value: '0',
          label: '待审批'
        }, {
          value: '2',
          label: '待开票'
        }, {
          value: '1',
          label: '被驳回'
        }, ],
        value: '',
        value1: '',
        value2: '',
        input: '',
        bill_status: '',
      startTime: '',
      tableData: [],
      fileUrl: {
        invoiceUrl: '',
      },
      queryTaskByParam: [],
      queryInvoiceByParam: [],
      checkboxSelect: 0,
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [], // 选中的数据
      serviceArr: [],
      businessMingxi: [],
      kuaidiGongsi: '',
      kuaidiCode: ''
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    search(){
      this.getTableData();
    },
    getTaskMingxi(item) {
      // 获取关联任务明细
      this.guanlianTaskModule = true;
      this.threeDialog = false;
      this.$http({
        url: "/api/quick/finance/manage/selectTaskListByNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // "businessId": this.busId
        },
        data: {
          selfBusinessId: item.selfBusinessId,
          settlementNo: item.settlementNo,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
          pageNum: 1,
          pageSize: 100,
        }
      }).then((data) => {
        if (data.code === 0) {
          this.guanlianTaskList = data.result.list;
        }
      });
    },
    getCreatOrUpdateInvoice(billNo, status) {
      // 发票驳回/通过
      this.$http({
        url: "/api/quick/finance/manage/authBusinessInvoice",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // "businessId": this.queryInvoiceByParam.businessId
        },
        data: {
          rejectReason: this.textarea,
          invoiceNo: billNo,
          billStatus: status
        },
      }).then((data) => {
        if (data.code === 0) {
          this.taskDelShow = false
          if(status == 1) {
            this.$message({
              message: '已驳回',
              type: 'success',
              offset: 60
            })
          }else {
            this.$message({
              message: '已通过',
              type: 'success',
              offset: 60
            })
          }
          this.getTableData();
        }
      });
    },
    getQueryInvoiceByParam(billNo, status) {
      // 获取发票详情
      if(status == 1) {
        this.taskDelShow = true;
      }else {
        this.jichuDelShow = true
        this.kuaidiGongsi = ''
        this.kuaidiCode = ''
      }
      this.$http({
        url: "/api/quick/finance/manage/queryInvoiceByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          billNo: billNo
        },
      }).then((data) => {
        if (data.code === 0) {
          this.queryInvoiceByParam = data.result;
          if(this.queryInvoiceByParam.billStatus == 1) {
            this.textarea = this.queryInvoiceByParam.rejectReason
          }
          this.getInvoiceSelet(billNo)
        }
      });
    },
    getInvoiceSelet(billNo) {
      // 发票详情查看结算单
      this.$http({
          // url: "/api/quick/finance/manage/querySettleListByInvoiceNo",
          url: "/api/quick/numb/querySettleListByInvoiceNo",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            invoiceNo: billNo,
            orderByAsc: false, // 是否正序
            orderByColume: "createTime", // 排序字段
            orderByZH: false, // 是否汉字
            pageNum: 1,
            pageSize: 1000
          }
        }).then((data) => {
          if (data.code === 0) {
            let list = data.result.list
            this.serviceArr = []
            for (let i = 0; i < list.length; i++) {
              this.serviceArr.push({
                id: list[i].settlementNo,
                settlementAmount: list[i].settlementAmount,
                startTime: list[i].platformPayTime,
                businessId: list[i].businessId
              })
            }
        }
      });
    },
    getQueryTaskByParam(item) {
      // 查看结算单明细
      this.TaskModuleShow = true;
      this.$http({
          url: "/api/quick/finance/manage/querySettleListByInvoiceNo",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            businessId: item.businessId,
            invoiceNo: item.billNo
          }
        }).then((data) => {
          if (data.code === 0) {
            this.businessList = data.result.list;
            this.total = data.result.total;
        }
      });
    },
    getTableData() {
      // 获取列表信息
      if(this.value1){
        this.endTime = this.value1[1]
        this.startTime = this.value1[0]
      }else {
        this.endTime = ''
        this.startTime = ''
      }
      this.$http({
        url: "/api/quick/finance/manage/queryInvoiceListByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          billStatus: this.value,
          startTime: this.startTime,
          endTime: this.endTime,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          clientType: 1,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData(false, false, 'createTime');
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData(false, false, 'createTime');
    },
    openUrl(url) {
      const link = document.createElement('a');
      link.href = url; // 图片 URL
      link.download = 'my-image.jpg'; // 设置下载文件名（需带后缀）
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    handleSelectionChange() {},
    getBusinessMingx(item) {
      // 获取结算单明细
      this.$http({
        // url: "/api/quick/finance/manage/querySettleByParam",
        url: "/api/quick/numb/querySettleListByInvoiceNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // "businessId": item.businessId,
        },
        data: {
          settlementNo: item.id,
          page: 1,
          size: 100,
        },
      }).then((data) => {
        if (data.code === 0) {
          this.invoiceTaskModule = true
          this.businessMingxi = [data.result.list[0]];
        }
        
      });
    },
    getBusinessMingxs(item) {
      // 获取结算单明细
      this.$http({
        // url: "/api/quick/finance/manage/querySettleListByInvoiceNo",
        url: "/api/quick/numb/querySettleListByInvoiceNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          businessId: item.businessId,
          settlementNo: item.settlementNo,
          invoiceNo: item.billNo,
          page: 1,
          size: 100,
        },
      }).then((data) => {
        if (data.code === 0) {
          this.invoiceTaskModule = true
          this.businessMingxi = data.result.list;
        }
      });
    },
    getBusinessList1(item) {
      this.getBusinessMingx1(item);
      // 获取个体工商户服务款
      this.threeDialog = true;
      this.busId = item.businessId
      // this.$http({
      //   url: "/api/quick/finance/manage/querySettleSeverFeeBySettleNo",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //     businessId: item.businessId,
      //   },
      //   data: {
      //     settlementNo: item.settlementNo,
      //     orderByAsc: false, // 是否正序
      //     orderByColume: "createTime", // 排序字段
      //     orderByZH: false, // 是否汉字
      //     pageNum: 1,
      //     pageSize: 1000
      //   },
      // }).then((data) => {
      //   if (data.code === 0) {
      //     this.invoiceTaskModule = false;
      //     this.businessThree = data.result.list;
      //     this.getBusinessMingx1(item);
      //   }
      // });
    },
    getBusinessMingx1(item) {
      // 获取明细内服务费信息
      this.$http({
        // url: "/api/quick/finance/manage/querySettleByParam",
        url: "/api/quick/numb/getNumbDetailPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // businessId: item.businessId,
        },
        data: {
          settleNo: item.settlementNo,
          orderByAsc: false, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: false, // 是否汉字
          pageNum: 1,
          pageSize: 10
        },
      }).then((data) => {
        if (data.code === 0) {
          this.buMingxiThree = data.result.list;
        }
      });
    },
    kuaidiEdit() {
      // if(this.kuaidiGongsi == '') {
      //   this.$message.error('请填写物流名称');
      //   return false
      // }
      // if(this.kuaidiCode == '') {
      //   this.$message.error('请填写快递单号');
      //   return false
      // }
      if(this.fileUrl.invoiceUrl == '') {
        this.$message.error('请上传发票')
        return false
      }
      let obj = this.queryInvoiceByParam
      obj.invoiceUrl = this.fileUrl.invoiceUrl
      obj.logisticsName = this.kuaidiGongsi
      obj.logisticsNo = this.kuaidiCode
      obj.sendTime = new Date()
      obj.billStatus = 3
      this.$http({
        url: "/api/quick/finance/manage/creatOrUpdateInvoice",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // "businessId": this.queryInvoiceByParam.businessId
        },
        data: obj
      }).then((data) => {
        if (data.code === 0) {
          this.jichuDelShow = false
          this.$message({
            message: '添加成功',
            type: 'success',
            offset: 60
          })
          this.getTableData();
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == 'businessName') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableData();
    },
    handleChange(param,name) {
      // 上传
			const form = new FormData()
      // 文件对象
      form.append('file', param.file)
      let loadingAlert = ElLoading.service({
          lock: true,
          text: '上传中...',
          customClass: 'custom-loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.1)'
      })
			this.$http({
        method: "POST",
        url: "/api/quick/oss/uploadBySingle",
				headers: {
          "content-type": "multipart/form-data",
          // "Authorization": localStorage.getItem("bussines_token")
        },
        data: form
     }).then(data => {
        if(data.code == 0) {
          this.fileUrl[name] = data.result
        }else {
          this.$message.error("上传失败")
        }
        loadingAlert.close()
      })
    },
    beforeRemove(name) {
      this.fileUrl[name] = ''
    }
  },
};
</script>
<style scoped>
.el-dialog__body {
  padding-top: 0;
}
.cardTits .el-button--text {
    font-size: 14px;
}
.cardTits .el-table .editor .el-button--text {
    margin-left: 0;
    font-size: 14px;
}
.taskDel {
    margin-top: 30px;
}
.taskDel em {
    margin: 0px 40px 32px 0;
}
.taskDel .el-input,.taskDel .el-textarea {
    width: 400px;
}
.downInvoice {
    border-color: #326CF0;
    background-color: #326CF0;
    border: 0;
    color: #fff;
    padding: 5px 15px;
    margin-top: -10px;
    border-radius: 5px;
    cursor: pointer;
}
</style>
<style>
#invoiceUrl .el-upload{
  float: left;
  width: auto;
  height: auto;
  border: none;
}
#invoiceUrl .el-button{
  float: left;
  border-color: #326CF0;
  background-color: #326CF0;
  color: #fff;
}
#invoiceUrl .el-upload-list{
  float: left;
}
#invoiceUrl .el-upload-list__item:first-child{
  margin: 5px 0 0 10px;
}
#invoiceUrl i{
  width: 15px;
}
#invoiceUrl .upload-demo{
  float: left;
  position: relative;
    top: -7px;
}
</style>
